import { h, isRef, reactive, readonly } from "vue";
import i18n from "@/lang";
import { datePickTypes } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
const { t } = i18n.global;
// 组件映射
const components = {
  input: {
    component: () => h(ElInput),
    modelValue: "modelValue",
    defaultProps: () => ({
      clearable: true,
    }),
    defaultValue: "",
    displayName: "输入框",
    icon: "icon-input",
  },
  number: {
    component: () => h(ElInputNumber),
    modelValue: "modelValue",
    defaultProps: () => ({
      clearable: true,
    }),
    defaultValue: null,
    displayName: "数字输入框",
    icon: "icon-number",
  },
  select: {
    component: (item, attrs) =>
      h(ElSelect, attrs, {
        default: () =>
          item.options && item.options.length
            ? item.options.map((v) =>
                h(ElOption, {
                  key: v.value,
                  label: v.label,
                  value: v.value,
                  ...item.subComponentProps,
                })
              )
            : null,
      }),
    modelValue: "modelValue",
    defaultProps: () => ({
      filterable: true,
      clearable: true,
    }),
    defaultValue: "",
    displayName: "选择器",
    icon: "icon-select",
  },
  vSelect: {
    component: (item, attrs) =>
      h(ElSelectV2, { options: item.options, ...attrs }),
    modelValue: "modelValue",
    defaultProps: () => ({
      filterable: true,
      clearable: true,
    }),
    defaultValue: "",
    displayName: "虚拟列表选择器",
    icon: "icon-select",
  },
  radio: {
    component: (item, attrs) =>
      h(ElRadioGroup, attrs, {
        default: () => {
          return item.options && item.options.length
            ? item.options.map((v) =>
                h(ElRadio, {
                  key: v.value,
                  label: v.label,
                  value: v.value,
                })
              )
            : null;
        },
      }),
    modelValue: "modelValue",
    defaultProps: () => {},
    defaultValue: "",
    displayName: "单选框",
    icon: "icon-radio",
  },
  checkbox: {
    component: (item) =>
      h(
        ElCheckboxGroup,
        {},
        {
          default: () =>
            item.options && item.options.length
              ? item.options.map((v) =>
                  h(ElCheckbox, {
                    key: v.value,
                    label: v.label,
                    value: v.value,
                  })
                )
              : null,
        }
      ),
    modelValue: "modelValue",
    defaultProps: () => {},
    defaultValue: [],
    displayName: "复选框",
    icon: "icon-checkbox",
  },
  switch: {
    component: () => h(ElSwitch),
    modelValue: "modelValue",
    defaultProps: () => {},
    defaultValue: false,
    displayName: "开关",
    icon: "icon-switch",
  },
  rate: {
    component: () => h(ElRate),
    modelValue: "modelValue",
    defaultProps: () => {},
    defaultValue: 0,
    displayName: "评分",
    icon: "icon-rate",
  },
  slider: {
    component: () => h(ElSlider),
    modelValue: "modelValue",
    defaultProps: () => {},
    defaultValue: [],
    displayName: "滑块",
    icon: "icon-slider",
  },
  upload: {
    component: (item) =>
      h(
        ElUpload,
        {},
        {
          default: () =>
            item.componentProps?.drag
              ? [
                  h(ElIcon, {}, { default: () => h(UploadFilled) }),
                  h("div", { class: "el-upload__text" }, [
                    t("form.DropFileHere"),
                    t("common.Or"),
                    h("em", {}, t("form.ClickToUpload")),
                  ]),
                ]
              : h(
                  ElButton,
                  { icon: "Upload" },
                  { default: () => t("form.ClickToUpload") }
                ),
        }
      ),
    modelValue: "fileList",
    defaultProps: () => {},
    defaultValue: [],
    displayName: "上传",
    icon: "icon-upload",
  },
  cascader: {
    component: (item) => h(ElCascader, { options: item.options }),
    modelValue: "modelValue",
    defaultProps: (item) => ({
      filterable: true,
      clearable: true,
      options: item.options,
    }),
    defaultValue: [],
    displayName: "级联选择器",
    icon: "icon-cascader",
  },
  treeSelect: {
    component: (item) => h(ElTreeSelect, { data: item.options }),
    modelValue: "modelValue",
    defaultProps: (item) => ({
      data: item.options,
      clearable: true,
    }),
    defaultValue: "",
    displayName: "树形选择器",
    icon: "icon-treeselect",
  },
  time: {
    component: () => h(ElTimePicker),
    modelValue: "modelValue",
    defaultProps: () => ({
      clearable: true,
    }),
    defaultValue: "",
    displayName: "时间选择器",
    icon: "icon-time",
  },
  segmented: {
    component: (item) => h(ElSegmented, { options: item.options }),
    modelValue: "modelValue",
    defaultProps: (item) => ({
      options: item.options,
    }),
    defaultValue: "",
    displayName: "分段器",
    icon: "icon-segmented",
  },
  color: {
    component: () => h(ElColorPicker),
    modelValue: "modelValue",
    defaultProps: () => ({
      showAlpha: true,
      colorFormat: "hex",
    }),
    defaultValue: "",
    displayName: "颜色选择器",
    icon: "icon-color",
  },
  autocomplete: {
    component: (item) =>
      h(ElAutocomplete, { fetchSuggestions: item.fetchSuggestions }),
    modelValue: "modelValue",
    defaultProps: () => ({
      clearable: true,
      fetchSuggestions: [],
    }),
    defaultValue: "",
    displayName: "自动补全输入框",
    icon: "icon-autocomplete",
  },
};
for (const date of datePickTypes) {
  let value = "";
  if (date.endsWith("range")) {
    value = [new Date().toLocaleDateString(), new Date().toLocaleDateString()];
  }
  components[date] = {
    component: (item) => ElDatePicker,
    modelValue: "modelValue",
    defaultProps: (item) => {
      return {
        type: item.type,
        valueFormat: "YYYY-MM-DD",
        clearable: true,
      };
    },
    defaultValue: value,
    displayName: `日期选择器`,
    icon: "icon-date",
  };
}

// Form组件
export const componentTypes = readonly(components);
